<template>
  <div>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchList">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24" @keyup.enter.native="searchList">
              <a-form-item label="综合搜索">
                <a-input v-model="queryParam.search" placeholder="请精确输入服务单号、销售单号、业务单号、手机号" />
              </a-form-item>
            </a-col>
            <!-- <a-col :md="8" :sm="24">
              <a-form-item label="销售单号">
                <a-input v-model="queryParam.orderSn" placeholder="请精确输入服务单号、销售单号、手机号" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="手机号">
                <a-input v-model="queryParam.phone" placeholder="请精确输入服务单号、销售单号、手机号" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="导购/搭配师手机号">
                <a-input v-model="queryParam.search" placeholder="请输入" />
              </a-form-item> 
            </a-col>-->
            <!-- <a-col :md="8" :sm="24">
              <a-form-item label="来源">
                <a-select v-model="queryParam.source" placeholder="请选择" :dropdownStyle="{ zIndex: '5' }">
                  <a-select-option value="all">全部</a-select-option>
                  <a-select-option :value="1">搭盒</a-select-option>
                  <a-select-option :value="2">有搭</a-select-option>
                </a-select>
              </a-form-item>
            </a-col> -->
            <a-col :md="8" :sm="24">
              <a-form-item label="订单类型">
                <a-select v-model="queryParam.type" placeholder="请选择" :dropdownStyle="{ zIndex: '5' }">
                  <a-select-option value="all">全部</a-select-option>
                  <a-select-option :value="10">搭配师</a-select-option>
                  <a-select-option :value="20">导购</a-select-option>
                  <a-select-option :value="30">有搭</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="状态">
                <a-select v-model="queryParam.statusList" placeholder="请选择" :dropdownStyle="{ zIndex: '5' }">
                  <a-select-option value="all">全部</a-select-option>
                  <a-select-option :value="1">已支付</a-select-option>
                  <a-select-option :value="2">已发货</a-select-option>
                  <a-select-option :value="3">已完成</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="创建时间" has-feedback>
                <a-range-picker style="width: 100%" showToday valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" v-model="queryParam.regTime" @change="onChange" @ok="onOk" />
              </a-form-item>
            </a-col>
            <a-col :md="16" :sm="24">
              <span class="table-page-search-submitButtons" :style="{ float: 'right', overflow: 'hidden' }">
                <a-button type="primary" @click="searchList">查询</a-button>
                <a-button style="margin-left: 18px" @click="resetList">重置</a-button>
                <!-- <a-popconfirm style="margin-left: 18px" title="确定导出当前条件下的订单?" ok-text="Yes" cancel-text="No" @confirm="confirm" @cancel="cancel">
                  <a-button>导出</a-button>
                </a-popconfirm> -->
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <s-table ref="table" size="default" :rowKey="record => record.id" :columns="columns" :data="loadData" :pagination="paginationProps" :scroll="{ x: 1900 }">
        <span slot="orderStatus" slot-scope="text">{{ text | orderStatus }}</span>
        <span slot="action" slot-scope="text, record">
          <template>
            <router-link :to="`/box/salesOrder/detail/${record.id}`">详情</router-link>
          </template>
        </span>
      </s-table>
    </a-card>
  </div>
</template>
<script>
import { STable } from '../components'
import { querySalesOrder } from '@/api/box/order'
import moment from 'moment'
const columns = [
  {
    title: '销售单号',
    dataIndex: 'orderSn',
    align: 'center',
    width: '180px'
  },
  {
    title: '服务单号',
    dataIndex: 'boxSn',
    align: 'center',
    width: '180px'
  },
  {
    title: '会员昵称',
    dataIndex: 'nickName',
    align: 'center'
  },
  {
    title: '会员手机号',
    dataIndex: 'phone',
    align: 'center',
    width: '150px'
  },
  {
    title: '状态',
    dataIndex: 'orderStatus',
    align: 'center',
    width: '90px',
    scopedSlots: { customRender: 'orderStatus' }
  },
  {
    title: '来源',
    dataIndex: 'type',
    align: 'center',
    width: '90px',
    customRender: text => (text == 30 ? '有搭' : '搭盒')
  },
  {
    title: '商品件数',
    dataIndex: 'productTotalQty',
    align: 'center',
    width: '90px'
  },
  {
    title: '实付金额（元）',
    dataIndex: 'paidAmount',
    align: 'center',
    customRender: text => '¥ ' + text
  },
  {
    title: '订单金额（元）',
    dataIndex: 'discountAmount',
    align: 'center',
    customRender: (text, record) => '¥ ' + (text + record.paidAmount)
  },
  {
    title: '商品金额（元）',
    dataIndex: 'productTotalPrice',
    align: 'center',
    customRender: text => '¥ ' + text
  },

  {
    title: '创建时间',
    dataIndex: 'createTime',
    align: 'center',
    width: '180px'
  },
  {
    title: '业务单号',
    dataIndex: 'serviceSn',
    align: 'center',
    width: '180px'
  },
  {
    title: '导购/搭配师',
    dataIndex: 'fashonerName',
    align: 'center'
  },
  // {
  //   title: '搭配师类型',
  //   dataIndex: 'isSales',
  //   align: 'center',
  //   customRender: text => (text == 0 ? '搭配师' : '导购')
  // },

  // {
  //   title: '金币',
  //   dataIndex: 'coin',
  //   align: 'center'
  // },

  // {
  //   title: '优惠券号',
  //   dataIndex: 'vouchersNo',
  //   align: 'center'
  // },
  // {
  //   title: '支付方式',
  //   align: 'center',
  //   customRender: text => '微信支付'
  // },
  // {
  //   title: '微信交易号',
  //   dataIndex: 'wechatTransactionId',
  //   align: 'center'
  // },
  // {
  //   title: '支付流水号',
  //   dataIndex: 'tradeNo',
  //   align: 'center'
  // },
  {
    title: '操作',
    dataIndex: 'action',
    width: '80px',
    align: 'center',
    fixed: 'right',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: {
    STable,
    moment
  },
  data() {
    this.columns = columns
    return {
      timeType: this.$route.query.timeType,
      type: '',
      queryParam: {
        // source: 'all',
        statusList: 'all',
        type: 'all'
      },
      paginationProps: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
      },
      loadData: parameter => this.fetchData(parameter)
    }
  },
  filters: {
    orderSource(v) {
      if (v == 30) {
        return '有搭'
      } else {
        return '搭盒'
      }
    },
    orderStatus(v) {
      if (v == 1) {
        return '已支付'
      } else if (v == 2) {
        return '已发货'
      } else if (v == 3) {
        return '已完成'
      }
    },
    sourceType(v) {
      if (v == 30) {
        return '有搭'
      } else {
        return '搭盒'
      }
    }
  },
  watch: {
    $route(to, from) {
      let currentPath = '/box/salesOrder/list'
      let detailPath = '/box/salesOrder/detail'
      if (from.path.includes(detailPath) && to.path.includes(currentPath)) {
        this.$refs.table.refresh()
      } else {
        if (from.path.includes(currentPath) && !to.path.includes(detailPath)) {
          this.$destroy()
        }
        if (to.path.includes(currentPath) && !from.path.includes(detailPath)) {
          this.$refs.table.refresh(true)
        }
      }
    }
  },
  created() {
    this.timeMethod()
  },
  methods: {
    timeMethod() {
      let startTime = ''
      let endTime = ''
      switch (this.timeType) {
        case '0':
          startTime = moment().format('YYYY-MM-DD')
          endTime = moment().format('YYYY-MM-DD')
          this.queryParam.regTime = [startTime, endTime]
          break
        case '1':
          startTime = moment()
            .subtract(1, 'days')
            .format('YYYY-MM-DD')
          endTime = moment().format('YYYY-MM-DD')
          this.queryParam.regTime = [startTime, endTime]
          break
        case '7':
          startTime = moment()
            .subtract(1, 'weeks')
            .format('YYYY-MM-DD')
          endTime = moment().format('YYYY-MM-DD')
          this.queryParam.regTime = [startTime, endTime]
          break
        case '30':
          startTime = moment()
            .subtract(1, 'months')
            .format('YYYY-MM-DD')
          endTime = moment().format('YYYY-MM-DD')
          this.queryParam.regTime = [startTime, endTime]
          break
      }
    },
    // 创建时间
    onChange(value, dateString) {
      console.log('Selected Time: ', value)
      console.log('Formatted Selected Time: ', dateString)
    },
    onOk(value) {
      console.log('onOk: ', value)
    },
    // 列表数据
    fetchData(parameter) {
      let params = {
        page: parameter,
        requestData: {}
      }

      const queryParam = JSON.parse(JSON.stringify(this.queryParam))
      if (queryParam.statusList == 'all') {
        delete queryParam.statusList
      }
      if (queryParam.type == 'all') {
        delete queryParam.type
      }
      /* if (queryParam.source == 'all') {
        delete queryParam.source
      } */

      Object.assign(params.requestData, queryParam)
      delete params.requestData.regTime
      if (this.queryParam.regTime && this.queryParam.regTime.length > 0) {
        params.requestData.startTime = this.queryParam.regTime[0]
        params.requestData.endTime = this.queryParam.regTime[1]
      }
      console.log(queryParam.statusList)
      if (params.requestData.statusList) {
        params.requestData.statusList = [queryParam.statusList]
      }
      return querySalesOrder(params).then(res => {
        if (res.code == 0) {
          return res
        } else {
          this.$message.warning(res.msg)
          const data = {
            page: {
              pageNo: 0,
              count: 0,
              pageSize: 10
            },
            data: []
          }
          return data
        }
      })
    },
    // 搜索
    searchList() {
      this.$refs.table.refresh(true)
    },
    // 重置
    resetList() {
      this.queryParam = {
        // source: 'all',
        statusList: 'all',
        type: 'all'
      }
      this.searchList()
    }
  }
}
</script>

